
MONTH = new Array(
            "January", "February", "March", "April", "May", "June", "July",
            "August", "September", "October", "November", "December"
            );
DAY = new Array(
            "Sun", "Mon", "Tue", "Wed",
            "Thu", "Fri", "Sat"
            );
DAYLONG = new Array(
            "Sunday", "Monday", "Tuesday", "Wednesday",
            "Thursday", "Friday", "Saturday"
            );

var html = "<div class=\"dp\">\
              <div class=\"dp-head\">\
                  <div class=\"dp-nav-prev\">\
                      <a href=\"#\" class=\"dp-nav-prev-year\" onclick=\"prevYear()\"> << </a>\
                      <a href=\"#\" class=\"dp-nav-prev-month\" onclick=\"prevMonth()\"> < </a>\
                  </div>\
                  <div class=\"dp-title\">\
                      <span class=\"dp-title-month\">February</span>\
                      <span class=\"dp-title-year\">2011</span>\
                  </div>\
                  <div class=\"dp-nav-next\">\
                      <a href=\"#\" class=\"dp-nav-next-month\"  onclick=\"nextMonth()\"> > </a>\
                      <a href=\"#\" class=\"dp-nav-next-year\"  onclick=\"nextYear()\"> >> </a>\
                  </div>\
              </div>\
              <div class=\"dp-body\">\
              </div>\
          </div>";

var currentDate = new Date();

// HTML Element
var datePickerContainer;
var datePickerBox;
var datePickerHead;
var datePickerTitle;
var datePickerMonth;
var datePickerYear;
var datePickerBody;
var datePickerOutput;
var form;
var formElementId;
var table;

// Visibilty of Calendar
var isVisible;

function calendar(containerId, formId, _formElementId) {
    id = "dp";
    datePickerContainer = document.getElementById(containerId);
    datePickerContainer.setAttribute("style", "display: none; position: absolute");
    datePickerContainer.innerHTML = html;

    form = document.forms[formId];
    formElementId = _formElementId;

    // *** unused ***
    datePickerOutput = form.elements[formElementId];
    datePickerOutput = document.getElementById(formElementId);
	datePickerOutput.setAttribute('style' , 'float: left;');
    // ***

    datePickerBox = datePickerContainer.childNodes[0];
    datePickerHead = datePickerBox.childNodes[1];
    datePickerTitle = datePickerHead.childNodes[3];
    datePickerMonth = datePickerTitle.childNodes[1];
    datePickerYear = datePickerTitle.childNodes[3];
    datePickerBody = datePickerBox.childNodes[3];

    // Current Visibility
    isVisible = false;

    addCalendar(currentDate.getFullYear(), currentDate.getMonth());
}

function removeEventHandlerFromBody() {
    body = document.getElementsByTagName("body")[0];
    body.removeEventListener("click", hideCalendar, false);
}

function addEventHandlerToBody() {
    body = document.getElementsByTagName("body")[0];
    body.addEventListener("click", hideCalendar(), false);
}

function showCalendar(element) {
    style = "\
    position:absolute;\n\
    display:block;\n\
    left : " + (offsetLeft(element) + element.offsetWidth + 1) + "px;\n\
    top : " + offsetTop(element) + "px;";

    datePickerContainer.setAttribute("style",style);
}

function hideCalendar() {
    datePickerContainer.style.display = "none";
}

function toggleCalendar(element) {
    if (isVisible) {
        hideCalendar();
        isVisible = false;
    } else {
        showCalendar(element);
        isVisible = true;
    }
}

function addCalendar(year, month) {
    var date;
    var thead;
    var tbody;
    var tr;
    var td;
    var a;
    var firstDayOfMonth;

    date = new Date(year, month, 1, 0, 0, 0, 0);

    table = document.createElement("table");
    datePickerBody.appendChild(table);

    // Add table head
    thead = document.createElement("thead");
    table.appendChild(thead);

    // Add day title
    for (var i=0; i<7; ++i) {
        td = document.createElement("th");
        td.setAttribute("class", id + "-day-title")
        td.innerHTML = DAY[i];
        thead.appendChild(td);
    }
    // End Add table head

    // Add table body
    tbody = document.createElement("tbody");
    table.appendChild(tbody);

    // Add date
    // Add First Week
    i = 0;
    firstDayOfMonth = date.getDay();
    date.setDate(-firstDayOfMonth + 1);
    tr = document.createElement("tr");
    tbody.appendChild(tr);
    while (i < 7) {
        td = document.createElement("td");

        if (i >= firstDayOfMonth) {
            td.setAttribute("class", id + "-date");
            addDate(td);
        }
        else {
            td.setAttribute("class", id + "-date-inactive");
            td.innerHTML = date.getDate();
        }

        date.setDate(date.getDate() + 1);
        tr.appendChild(td);
        ++i;
    }

    // Add Next Weeks
    while (i < 35) {
        if (i % 7 == 0) {
            tr = document.createElement("tr");
            tbody.appendChild(tr);
        }

        td = document.createElement("td");
        tr.appendChild(td);

        if (date.getMonth() == month) {
            td.setAttribute("class", id + "-date");
            addDate(td);
        }
        else {
            td.innerHTML = date.getDate();
            td.setAttribute("class", id + "-date-inactive");
        }

        date.setDate(date.getDate() + 1);
        ++i;
    }
    date.setMonth(date.getMonth()-1, 1);

    function addDate(td) {
        td.innerHTML = date.getDate();
        td.onclick = function() {
            var year = date.getFullYear();
            var month = (date.getMonth() + 1 < 10) ? "0" + (date.getMonth() + 1) : (date.getMonth() + 1);
            var day = (this.innerHTML < 10) ? "0" + this.innerHTML : this.innerHTML;

            form.elements[formElementId].value = year + "-" + month  + "-" + day;
            datePickerContainer.setAttribute("style", "display: none;");
        }
    }
}

function removeCalendar() {
    datePickerBody.removeChild(table);
}

function changeCalendar(incrementMonth, incrementYear) {
    removeCalendar();
    currentDate.setMonth(currentDate.getMonth() + incrementMonth, 1);
    currentDate.setYear(currentDate.getFullYear() + incrementYear);
    addCalendar(currentDate.getFullYear(), currentDate.getMonth());
    datePickerMonth.innerHTML  = " " + MONTH[currentDate.getMonth()] + " ";
    datePickerYear.innerHTML = currentDate.getFullYear() + " ";
}

function nextMonth() {
    changeCalendar(1, 0);
}

function nextYear() {
    changeCalendar(0, 1);
}

function prevMonth() {
    changeCalendar(-1, 0);
}

function prevYear() {
    changeCalendar(0, -1);
}

function offsetLeft(element) {
    var curLeft = 0;
    if (element.offsetParent) {
        do {
            curLeft += element.offsetLeft;
        } while (element = element.offsetParent);
    }

    return curLeft;
}

function offsetTop(element) {
    var curTop = 0;
    if (element.offsetParent) {
        do {
            curTop += element.offsetTop;
        } while (element = element.offsetParent);
    }

    return curTop;
}